<template>
    <div>
        <ButtonGroup style="margin:10px 10px">
            <Button type="success" @click="add">
                新增
            </Button>
            <Button type="warning" @click="updata">
                修改
            </Button>
            <Button type="error" @click="deleteClick">
                删除
            </Button>
        </ButtonGroup>
        <Table @on-selection-change="select" style="margin:0 10px;" :loading="loading" border ref="selection" :columns="columns4" :data="MsbdList"></Table>
        <Page :total="pageObj.total" style="margin:10px;" @on-change="jumpPage" />
        <Modal v-model="modal" title="新增" @on-ok="saveBtn">
            <Form :model="formItem" :label-width="80">
                <FormItem label="用户名">
                    <Input v-model="formItem.userName" placeholder="请输入用户名..." />
                </FormItem>
                <FormItem label="邮箱">
                    <Input v-model="formItem.email" placeholder="请输入邮箱..." />
                </FormItem>
                <FormItem label="手机号">
                    <Input v-model="formItem.mobile" placeholder="请输入手机号..." />
                </FormItem>
                <FormItem label="密码">
                    <Input v-model="formItem.password" type="password" placeholder="请输入密码..." />
                </FormItem>
                <FormItem label="选择密保">
                    <Select v-model="formItem.question">
                        <Option value="我最好的朋友的生日">我最好的朋友的生日</Option>
                        <Option value="我儿时的居住地">我儿时的居住地</Option>
                        <Option value="我的座右铭">我的座右铭</Option>
                        <Option value="我最喜欢的电影">我最喜欢的电影</Option>
                        <Option value="我最喜欢的歌曲">我最喜欢的歌曲</Option>
                        <Option value="我最喜欢的食物">我最喜欢的食物</Option>
                    </Select>
                </FormItem>
                <FormItem label="答案">
                    <Input v-model="formItem.answer" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="密码问题答案..." />
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers("User");
import axios from "axios";
export default {
  data() {
    return {
      columns4: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "用户名",
          key: "userName"
        },
        {
          title: "邮箱",
          key: "email"
        },
        {
          title: "手机号",
          key: "mobile"
        },
        {
          title: "问题",
          key: "question"
        },
        {
          title: "答案",
          key: "answer"
        }
      ],
      formItem: {},
      shopsize: "",
      modal: false,
      seleform: []
    };
  },
  methods: {
    ...mapActions(["getMsbdList", "jumpPage", "save", "delete"]),
    ...mapMutations(["setisupdata"]),
    select(form) {
      this.seleform = form;
    },
    saveBtn() {
      this.save(this.formItem).then(() => {
        this.seleform = [];
      });
    },
    add() {
      this.modal = true;
      this.setisupdata(false);
      this.formItem = {};
    },
    updata() {
      if (this.seleform.length != 1) {
        this.$Message.warning("请选择一项进行修改!");
        return;
      }
      this.modal = true;
      this.setisupdata(true);
      this.formItem = this.seleform[0];
    },
    deleteClick() {
      if (this.seleform.length == 0) {
        this.$Message.error("请选择需要删除的项!");
        return;
      }
      if (!confirm("确定删除该项吗！")) return;
      this.delete(this.seleform).then(() => {
        this.seleform = [];
      });
    }
  },
  mounted() {
    this.getMsbdList();
  },
  computed: {
    ...mapState(["MsbdList", "loading", "pageObj", "isupdata"])
  }
};
</script>

<style>
</style>
